<template>
    <view class="content">
        <view class="rate-i" v-for="(item, index) in list" :key="index">
        	<view class="info" v-if="item.members">
        		<image :src="item.members.image_uri" class="avatar"></image>
        		<view class="u-flex-1">
        			<view class="name">{{item.members.nickname}}</view>
        			<u-rate v-model="item.level" size="24" active-color="#fcc206" disabled></u-rate>
        		</view>
        	</view>
        	<view class="text" v-if="item.content">{{item.content}}</view>
        	<view class="spec" v-if="item.title">
        		规格：{{item.title}}
        	</view>
        </view>
		
		<view style="height: 94rpx;padding-top: 30rpx;">
		    <u-loadmore :status="status" v-if="status != 'loadmore'" />
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				status: 'loadmore', //是否显示没有更多了
				page: 1,
				list: [],
            };
        },
        onLoad() {
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('evaluates', {
                    userToken: this.$getSync('userToken'),
                    page: this.page,
                    limit: 10,
                }).then(ret => {
            		if (ret.status == 0) {
                        if (ret.data.length > 0) {
                        	this.list = this.list.concat(ret.data);
                        	this.page++;
                        	this.status = 'loadmore'
                        } else {
                        	this.status = 'nomore'
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding: 18rpx;
	}
	.rate-i{
		padding: 25rpx 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.avatar{
		width: 71rpx;
		height: 71rpx;
		border-radius: 50%;
		margin-right: 18rpx;
	}
	.name{
		font-size: 30rpx;
		font-weight: bold;
	}
	.text{
		padding: 25rpx 0;
		font-size: 26rpx;
		word-break: break-all;
		white-space: pre-line;
	}
	.spec{
		padding: 16rpx 20rpx;
		background-color: #f6f8fb;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #35527e;
		word-break: break-all;
		white-space: pre-line;
	}

</style>
